<template>
  <div class="w-full">
    <SForm ref="formRef" :elFormConfig="{'label-position':'top'}" :formItems="formItems" :data="data"
      @update:data="changeHandle">
      <template #layoutCustom="{ backData }">
        <SForm :propKey="[ backData.propKey ]" :formItems="formItemsLayout" v-model:data="data.layout">
        </SForm>
      </template>
    </SForm>
    {{data}}
    <div class="w-full h-50px  rounded p-3">
      <el-button @click="submit">布局</el-button>
    </div>
  </div>
</template>
<script setup lang='ts'>
import SForm from '@/SBaseComponent/BaseForm/src/Form.vue'
import type { Props } from '@/SBaseComponent/BaseForm/src/types/index.ts'
import { ElMessage } from 'element-plus'
interface propMsg {
  value: Record<string, any>
}
const emit = defineEmits(['changeHandle'])
const props = withDefaults(defineProps<propMsg>(), {})
const { value: data } = toRefs(props)

const formItems: Props['formItems'] = [
  {
    label: '对象属性',
    field: 'field',
    type: 'input',
    formItemConfig: {
      rules: [{ required: true, message: '不能为空', trigger: 'change' }],
    },
  },
  {
    label: '标签文本',
    field: 'label',
    type: 'input',
    formItemConfig: {
      rules: [{ required: true, message: '不能为空', trigger: 'change' }],
    },
  },
  {
    label: '',
    hideLabel: true,
    field: 'layout',
    type: 'custom',
    layout: { span: 24 },
    formItemConfig: {
      style: { padding: '0px 0px 0px 0px' },
    },
    slotNames: ['layout'],
  },
]
const formItemsLayout: Props['formItems'] = [
  {
    label: 'span',
    field: 'span',
    type: 'inputNumber',
    layout: { span: 24 },
    formItemConfig: {
      rules: [
        { required: true, message: '用户名称不能为空', trigger: 'change' },
      ],
    },
  },
]

function changeHandle(data: Record<string, any>) {
  console.log('changeHandle', data)
  emit('changeHandle', data)
}

const formRef = ref()

function submit() {
  formRef.value?.validate((valid: boolean) => {
    console.log('submit', formRef.value.elFormRef, valid)
    if (valid) {
      console.log('submit!')
      ElMessage.success('校验通过')
    } else {
      console.log('error submit!!')
      ElMessage.error('请检查表单数据')
      return false
    }
  })
}
</script>
<style scoped lang='scss'>
</style>